<template>
  <div class="ProductionEchart">
    <div class="chat-title">{{selectItem}}</div>
    <div class="test_box" id="ProductionEchartmain"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';

  export default {
    props: ["produceInfo", "selectItem"],
    data() {
      return {
        myChart: ""
      };
    },
    watch: {
      produceInfo(newValue, oldValue) {
        // var option1 = this.myChart.getOption();
        this.myChart.clear();
        // this.myChart.setOption(option1);

        this.drawBar();
      }
    },
    mounted() {
      this.drawBar();
    },
    methods: {
      drawBar: function () {
        var self = this;
        var listx = [];
        var list1 = [];
        var list2 = [];
        var list3 = [];
        var list4 = [];
        this.produceInfo.forEach(obj => {
          listx.push(obj.TimeSpan);
          list1.push(obj.GoodCount);
          list2.push(obj.ReWorkCount);
          list3.push(obj.NgCount);
          list4.push(obj.PlanCount)
        });
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("ProductionEchartmain"));
        let option = {
          // color: ['#2F8DE4'],
          color: ['#6C62FF', '#51A4F2', '#FF486F', 'red'],

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [{
                name: '合格数量',
                icon: 'circle',
              },
              {
                name: '返修数量',
                icon: 'circle',
              },
              {
                name: '报废数量',
                icon: 'circle',
              },
              {
                name: '计划输出指标',
                icon: 'circle',
              }
            ],
            left: 'right',
            padding: [5, 40, 15, 20],
            itemGap: 20,

            textStyle: {
              color: 'white'
            },
          },
          calculable: true,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: listx,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: "#535353"
              }
            },
          }],
          series: [{
              name: '合格数量',
              type: 'bar',
              barWidth: '30%',
              data: list1,
              stack: "产量信息"
            }, {
              name: '返修数量',
              type: 'bar',
              barWidth: '30%',
              data: list2,
              stack: "产量信息"
            }, {
              name: '报废数量',
              type: 'bar',
              barWidth: '30%',
              data: list3,
              stack: "产量信息"
            },
            {
              name: '计划输出指标',
              type: 'line',
              barWidth: '30%',
              data: list4,
              // stack: "产量信息"
            },
          ]
        };
        // 使用刚指定的配置项和数据显示图表
        // myChart.setOption(option);
        self.myChart.setOption(option);

        window.addEventListener("resize", function () {
          self.myChart.resize();
        });

        // 当窗口或者大小发生改变时执行resize，重新绘制图表
        // window.onresize = myChart.resize;
      }
    }
  }

</script>

<style lang="scss">
  .ProductionEchart {
    min-height: 489px;

    .test_box {
      // margin: 10px auto;
      width: 100%;

      height: 400px;
    }
  }

</style>
